/*
* xxxx科技有限公司版权所有（）.
* Copyright (c) 2019, and/or its affiliates. All rights reserved.
* @Date: 2020.08.03 21:52.
* @Author
* @Description  单个商品 - 详情 - 页面
**/
<template>
  <div class="ca-change">
    <div class="ca-card bg-f">
      <img src="../../assets/img/logo.png" />
      <h3>{{commodity&&commodity.goodsName}}</h3>
      <p>限指定加油站使用</p>
      <div class="ca-money mt10">
        <span v-if="flag">￥{{commodity&&commodity.distributorGoodsPrice/100 - saleValue}}</span>
        <span v-else>￥{{commodity&&commodity.distributorGoodsPrice/100}}</span>

        <del v-if="flag">{{commodity&&commodity.distributorGoodsPrice/100}}</del>
      </div>
      <div class="pr-tips" v-show="flagInfo">{{flagInfo}}</div>
    </div>

    <el-button @click="handlePaymentClick" class="ca-submit" type="primary">立即购买</el-button>

    <div class="pr-cozy">
      <p>温馨提醒：</p>
      请务必使用建设银行信用卡付款，否则会购买失败
    </div>
    <!-- 立即购买 提示 弹窗 -->
    <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="90%">
      <span>{{flagInfo}}, 是否原价购买？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDetermineClick">确 定</el-button>
      </span>
    </el-dialog>

    <footer-bar></footer-bar>
  </div>
</template>

<script>
import md5 from 'md5'
import dayjs from 'dayjs'
import urls from '@/api/urls'
import footerBar from '@/views/Footer/'
import { getData, postData, patchData } from '@/api/'
// import wx from 'weixin-js-sdk'

export default {
  name: 'Exchange',
  props: {},
  components: { footerBar },
  data() {
    return {
      goodsId: '',
      saleValue: '', // 抵扣金额
      iframeSrc: '',
      flag: false, // 是否当前可买 --- 立即购买 置灰
      flagInfo: '', // 本日优惠 次数已满、本日名额 已满、本月优惠 次数已满、本日优惠 次数已满
      commodity: {},
      phoneNUm: '',
      payParams: {},
      statusType: {}, // 购买前 的状态
      orderNum: '', // openid
      dialogVisible: false,
    }
  },
  watch: {},
  mounted() {
  },
  created() {
    window.onpopstate = function () {}
    this.goodsId = this.$route.params.id || '1' // 单个商品的id
    this.getGoodsDetail() // 获取 单个商品 详情
    this.phoneNUm = localStorage.getItem('phoneNum')
    console.log('this.$route.params--goodsId 单个商品id-----------', this.goodsId, this.phoneNUm)
  },
  methods: {
    /**
     *@Description
     *@Return 获取 单个商品 详情.
     **/
    getGoodsDetail() {
      // /ccb/H5/activity/check/user/info   判断当前用户券码状态
      const obj = {
        flag: false, // 是否当前可买 --- 立即购买 置灰
        time: '', // 时间
        sale: '', // 剩下总数
        total: '', // 活动总数
        phone: '', // 手机号码
        value: '', // 当前可购买总数
        dayValue: '', // 当天可买总数
        activityId: '', // id
        flagInfo: '本日优惠 次数已满', // 本日优惠 次数已满、本日名额 已满、本月优惠 次数已满
      }
      const infoParams = {
        activityId: localStorage.getItem('activeId') || this.goodsId, // 当前活动id
        week: new Date().getDay() || '7', // 当周日期 1~7表示
        time: dayjs().format('YYYY-MM-DD'), // 时间，时间为当天确定到日
        daytime: dayjs().format('HH:mm:ss'), // 当前时间 时间格式未hh-mm-ss
        phone: this.phoneNUm || localStorage.getItem('phoneNum') || '13956253359', // 手机号
      }
      getData(infoParams, urls.checkInfo).then(res => { // 提示 - 描述使用
        // flag  false 原价、  true 原价-抵扣金额
        // flagInfo 有则展示、无隐藏

        console.log('此处返回单个商品信息----', res)
        this.flag = res.result.flag
        this.flagInfo = res.result.flagInfo
        this.statusType = { ...res.result }
      })

      //  获取商品 活动列表
      const url1 = `${urls.goodsUrl}/${this.goodsId}`
      getData({}, url1).then(res => {
        this.saleValue = localStorage.getItem('saleValue')
        this.commodity = { ...res.result }
        console.log('单个商品---', res)
      })
    },
    /**
     *@Description flag  false 原价、  true 原价-抵扣金额
     *@Return 购买 按钮 事件监听.
     **/
    handlePaymentClick() {
      if (this.flag) {
        this.buyFn() // 优惠购买 - 不提示
      } else {
        this.dialogVisible = true // 原价购买购买 - 给予提示
      }
    },
    /**
    *@Description
    *@Return 立即购买 ----  确认 ---- 按钮.
    **/
    handleDetermineClick() {
      this.buyFn()
      console.log('确认')
    },
    /**
    *@Description
    *@Return 购买方法.
    **/
    buyFn() {
      const goodsParams = {
        goodId: this.goodsId, // 商品id
        sale: this.saleValue, // 抵扣金额
        phone: this.phoneNUm, // 手机号码
        activityId: localStorage.getItem('activeId'), // 活动id
      }
      // flag  false 原价、  true 原价-抵扣金额
      if (this.flag) {
        goodsParams.sale = this.saleValue // 原价购买购买 - 抵扣金额 为 this.saleValue
      } else {
        goodsParams.sale = 0 // 原价购买购买 - 抵扣金额 为 0
      }

      postData(goodsParams, urls.payInfoUrl).then(result => {
        console.log('支付预下单接口返回值goodsParams.---------', result)
        this.orderNum = localStorage.getItem('openId')
        localStorage.setItem(this.orderNum, result.result.id) // 在openid下面 挂载订单号 - 订单id  ----- 此方法不妥
        // localStorage.setItem(订单号, result.result.id) // 在订单号下面 挂载 - 订单id

        const openIdParams = {
          id: result.result.id, // 订单id
          openId: localStorage.getItem('openId'), // openId
        }
        getData(openIdParams, urls.goodsInfoUrl).then(result => { // 获取拉起支付的 参数
          const data = JSON.parse(result.data)
          const payData = JSON.parse(data.pay_data)
          this.payParams = payData

          // localStorage.setItem(this.orderNum, JSON.stringify(payData)) // 在openId下面 挂载拉起微信支付的参数 ----- 此方法不妥
          // localStorage.setItem(订单号, JSON.stringify(payData)) // 在订单号下面 挂载拉起微信支付的参数

          this.wxpay() // 拉起支付
        })
      })
    },
    /**
     *@Description
     *@Return 拉起微信支付.
     **/
    wxpay() {
      if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
        }
      } else {
        this.onBridgeReady()
      }
    },
    /**
     *@Description
     *@Return 支付.
     **/
    onBridgeReady() {
      //  "appId": "wx2421b1c4370ec43b",     //公众号名称，由商户传入
      //   "timeStamp": "1395712654",         //时间戳，自1970年以来的秒数
      //   "nonceStr": "e61463f8efa94090b1f366cccfbbb444", //随机串
      //   "package": "prepay_id=u802345jgfjsdfgsdg888",
      //   "signType": "MD5",         //微信签名方式：
      //   "paySign": "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
      WeixinJSBridge.invoke('getBrandWCPayRequest', this.payParams, (res) => {
        console.log('get_brand_wcpay_request:ok--------', res)
        if (res.err_msg == 'get_brand_wcpay_request:ok') {
          localStorage.setItem(this.orderNum, '')
          const url = 'http://sandlife.xajhzx.cn/h5/index.html' + localStorage.getItem('paySearchUrl') + '#/use-list/123'
          window.location.href = url
          // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ca-change {
  padding: 15px;
}
.ca-card {
  font-weight: 400;
  position: relative;
  height: 120px;
  img {
    float: left;
    width: 45px;
    height: 45px;
    margin: 10px 10px 25px 10px;
  }
  h3 {
    font-size: 16px;
    line-height: 25px;
    padding: 15px 0 10px 0;
    color: rgba(0, 0, 0, 0.9);
  }
  p {
    font-size: 14px;
    color: #9b9b9b;
  }
  del {
    font-size: 14px;
    margin-left: 10px;
    color: #868686;
  }
}
/* 共用 */
.ca-money {
  span {
    font-family: PingFangSC-Regular;
    font-size: 18px;
    color: #ff1817;
  }
}
// 商品列表中 提示
.pr-tips {
  font-size: 10px;
  font-size: 12px;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 58px;
  height: 48px;
  padding: 0 5px;
  text-align: center;
  color: #fff;
  border-radius: 0px 0px 8px 8px;
  background: linear-gradient(0deg, #68c0fa, #0099ff);
}
.ca-submit {
  display: block;
  width: 100%;
  margin: 20px auto;
  letter-spacing: 2px;
  border: 1px solid #0099ff;
  background: #0099ff;
}
//  以下未使用
/* 0号代金券 */
.ca-pay {
  padding: 15px 25px;
  h5 {
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 5px;
    opacity: 0.45;
    color: rgba(0, 0, 0, 1);
  }
  ::v-deep .el-input__inner {
    padding: 0;
    border: none;
    outline: none;
  }
}
/* 1号代金券 */
.ca-pay1 {
  h5 {
    opacity: 1;
  }
  span {
    color: #e5110f;
  }
}
/* 1号代金券 */
.ca-pay2 {
  h5 {
    opacity: 1;
  }
  span {
    color: #009f2a;
  }
}

/* 付款 */
.ca-payment {
  margin: 10px 0 20px 0;
  li {
    padding: 15px 25px;
  }
}
.ca-big {
  font-size: 24px;
  margin-top: -9px;
}
// 温馨提示
.pr-cozy {
  font-size: 14px;
  padding: 10px;
  text-align: center;
  color: #999;
  border: 1px solid #eee;
  border-radius: 10px;
  p {
    margin-bottom: 5px;
  }
}
</style>
